<template>
	<view class="warp">
		<view class="textbox fillet">
			<input v-model="formdata.Title" type="text" placeholder="填写你想发布的课程标题" />
			<input v-model="formdata.TechnicianName" type="text" placeholder="填写教练姓名" />
			<textarea
				v-model="formdata.Remark"
				placeholder-style="font-size: 26rpx;line-height: 1.6;font-weight: 500;"
				placeholder="填写你要发布的课程介绍，全面的课程介绍更容易吸引大家的加入哦~"
			></textarea>
		</view>
		<!-- <view class="textbox fillet" style="margin-top: 30rpx;">
			<view class="tit_box">
				教练信息
			</view>
			<input v-model="formdata.TechnicianName" type="text" placeholder="填写教练姓名" />
			<textarea
				v-model="formdata.TechnicianDesc"
				placeholder-style="font-size: 26rpx;line-height: 1.6;"
				placeholder="填写你要发布的教练介绍"
			></textarea>
		</view> -->
		<view class="img_list fillet">
			<view class="title">教练图片</view>
			<view class="img_box">
				<view class="img" v-for="(item,i) in imgArr" :key="i">
					<image :src="item.tempUrl" mode="aspectFill"></image>
					<view class="icon" @click.stop="delImg(i)">
						<image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1710154762492571.png" mode=""></image>
					</view>
				</view>
				<!-- #ifdef MP-WEIXIN -->
					<view class="img addimg" @tap="upload" v-if="imgArr.length<9">
						<image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17104950296621296.png" mode=""></image>
					</view>								
				<!-- #endif -->
				<!-- #ifdef APP-PLUS -->
					<view class="img addimg" @tap="selectImg_APP" v-if="imgArr.length<9">
						<image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17104950296621296.png" mode=""></image>
					</view>
				<!-- #endif -->
			</view>
		</view>
		<view class="checkbox fillet">
			
			<view class="check_item" @click="$refs.classTime.open()">
				<view class="tit">课程日期</view>
				<view class="check_content">
					<view :class="['lit',formdata.ServerDate?'':'gary']">{{formdata.ServerDate ? formdata.ServerDate : '请选择课程日期'}}</view>
					<uni-icons size="16" color="#d0d0d0" type="right"></uni-icons>
				</view>
			</view>
			<view class="check_item" @click="$refs.timeSlot.open()">
				<view class="tit">上课时间</view>
				<view class="check_content">
					<view :class="['lit',formdata.ServerTime?'':'gary']">{{formdata.ServerTime ? 	formdata.ServerTime+'~'+formdata.ServerEndTime : '请选择上课时间'}}</view>
					<uni-icons size="16" color="#d0d0d0" type="right"></uni-icons>
				</view>
			</view>
			
			<view class="check_item" @click="nav_to('/pages/ball/ball_site')">
				<view class="tit">上课地址</view>
				<view class="check_content">
					<view :class="['lit',formdata.Place?'':'gary']">{{formdata.Place ? formdata.Place : '请选择上课地址'}}</view>
					<uni-icons size="16" color="#d0d0d0" type="right"></uni-icons>
				</view>
			</view>
			<view class="check_item">
				<view class="tit">报名人数</view>
				<view class="check_content">
					<input v-model="formdata.PeopleNum" class="lit" type="number" placeholder="请填写人数" />
				</view>
			</view>
			<view class="check_item">
				<view class="tit">联系电话</view>
				<view class="check_content">
					<input v-model="formdata.Mobile" class="lit" type="tel" placeholder="请填写联系电话" />
				</view>
			</view>
			<view class="check_item">
				<view class="tit">是否收费</view>
				<view class="check_content">
					<view class="inp_box">
						<u-radio-group v-model="formdata.IsPayRegisterFee">
							<u-radio activeColor="#333" name="1" shape="circle" labelColor="#333" label="收费"></u-radio>
							<u-radio activeColor="#333" name="0" shape="circle" labelColor="#333" label="不收费"></u-radio>
						</u-radio-group>
					</view>
				</view>
			</view>
			<view class="check_item" v-if="formdata.IsPayRegisterFee==1">
				<view class="tit">课程价格</view>
				<view class="check_content">
					<input v-model="formdata.RegisterFee" style="width: 75%;" class="lit" type="number" placeholder="请输入课程价格" />
					<view style="margin-left: 10rpx;">
						/元
					</view>
				</view>
			</view>
		</view>
		<uni-popup ref="classTime" type="bottom">
			<view class="check_wap">
				<view class="check_tab">
					<view class="nav">
						<view :class="['nav_text',checkIndex==index?'nav_active':'']"  v-for="(item,index) in checkTab" :key="index" @click="checkIndex=index">
							{{item}}
						</view>
					</view>
					<view class="close" @click="$refs.classTime.close()">
						<image src="@/static/img/icon/del.png" mode=""></image>
					</view>
				</view>
				<picker-view v-if="checkIndex==0" class="picker_view" mask-class="maskclass" :value="dateTimeVal" @change="dateTimeFun">
					<picker-view-column>
						<view class="picker_colum" v-for="(item,index) in dateTime.yArr" :key="index">
							{{item}}
						</view>
					</picker-view-column>
					<picker-view-column>
						<view class="picker_colum" v-for="(item,index) in dateTime.mArr" :key="index">
							{{item}}
						</view>
					</picker-view-column>
					<picker-view-column>
						<view class="picker_colum" v-for="(item,index) in dateTime.dArr" :key="index">
							{{item}}
						</view>
					</picker-view-column>
				</picker-view>
				<picker-view v-if="checkIndex==1" class="picker_view" mask-class="maskclass" @change="cycleFun">
					<picker-view-column>
						<view class="picker_colum" v-for="(item,index) in dateColumns" :key="index">
							{{item.label}}
						</view>
					</picker-view-column>
				</picker-view>
				<picker-view v-if="checkIndex==2" class="picker_view" mask-class="maskclass">
					<picker-view-column>
						<view class="picker_colum">
							电话随时咨询教练
						</view>
					</picker-view-column>
				</picker-view>
				<view class="picker_btn" @click="tapDateTime">
					确定
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="timeSlot" type="bottom">
			<view class="check_wap">
				<view class="check_tab">
					<view class="close" style="opacity: 0;">
						<image src="@/static/img/icon/del.png" mode=""></image>
					</view>
					<view class="nav tit">
						选择上课时间
					</view>
					<view class="close" @click="$refs.timeSlot.close()">
						<image src="@/static/img/icon/del.png" mode=""></image>
					</view>
				</view>
				<picker-view class="picker_view" mask-class="maskclass" :value="dateVal" @change="dateFun">
					<picker-view-column>
						<view class="picker_colum" v-for="(item,index) in date.hours" :key="index">
							{{item}}
						</view>
					</picker-view-column>
					<picker-view-column>
						<view class="picker_colum" v-for="(item,index) in date.min" :key="index">
							{{item}}
						</view>
					</picker-view-column>
					<picker-view-column>
						<view class="picker_colum">
							至
						</view>
					</picker-view-column>
					<picker-view-column>
						<view class="picker_colum" v-for="(item,index) in date.hours" :key="index">
							{{item}}
						</view>
					</picker-view-column>
					<picker-view-column>
						<view class="picker_colum" v-for="(item,index) in date.min" :key="index">
							{{item}}
						</view>
					</picker-view-column>
				</picker-view>
				<view class="picker_btn" @click="tapDate">
					确定
				</view>
			</view>
		</uni-popup>
		<view style="height: 130rpx;"></view>
		<view class="btn_box" @click="send">
			<view class="go_btn">发布课程</view>
		</view>
	</view>
</template>

<script>
var now = new Date();
var year = now.getFullYear(); // 获取当前年份
var month = now.getMonth() + 1; // 获取当前月份
var date = now.getDate(); // 获取当前日期
export default {
	data() {
		return {
			dateColumns: [{label:'每天',value:'day'},{label:'每周一',value:'day1'}],
			uptime:'',
			address:'',
			checkTab:['日期选择'],
			checkIndex:0,
			dateTime:this.$util.getDateTime(year,month),
			dateTimeVal:[0,0,0],
			date:this.$util.division(),
			dateVal:[8,0,0,8,0],
			formdata:{
				reward: 0,
				ShopID: "",
				Remark: "",
				Price: 0,
				giftPrice: 0,
				ServerDate:'',// 上课日期
				ServerTime:'',// 开始时间
				ServerEndTime:'',//  结束时间 
				IsPayRegisterFee:'',// 是否付费 0 1
				RegisterFee:'',// 费用金额
				ItemStr: "",
				FeeRule: "",
				PeopleNum: '',//人数
				IsOpen: "0",
				Title: "",
				WomenNum: 0,
				City: "",
				AppointmentType: "多人球局",
				Longitude: '',
				Latitude: '',
				Place:'',// 上课地址
				GolfType: '教练课',
				TechnicianName:'',
				Mobile:'',
				Images:[]
			},
			imgArr:[]
		};
	},
	onLoad() {
		this.isTeacher()
		uni.$on('site', async data => {
			this.formdata.Place = data.ShopName;
			// this.ShopName = data.ShopName;
			this.formdata.ShopID = data.ID;
			this.formdata.RegisterFee = data.Price;
			this.formdata.Longitude = data.Longitude;
			this.formdata.Latitude = data.Latitude;
		
			let res = await this.$util.getGeocoder(data.Address);
			this.formdata.City = res.result.addresscomponents.city;
		});
		uni.$on('reward', async data => {
			this.formdata.reward = data
		})
		uni.$on('custom', async data => {
			// this.Place = data.Place
			// this.ShopName = data.Place
			this.formdata.ShopID = 0
			this.formdata.Place = data.Place
			this.formdata.Longitude = data.Longitude
			this.formdata.Latitude = data.Latitude
		})
	},
	onUnload() {
		uni.$off('site')
		uni.$off('reward')
		uni.$off('custom')
	},
		onReady() {
			uni.setNavigationBarColor({
				frontColor: '#000000',
				backgroundColor: '#ffffff',
				animation: {
					duration: 400,
					timingFunc: 'easeIn'
				}
			})
		},
	methods:{
		async isTeacher(){
			let res = await this.$api.post('/Technicians/Get')
			if(!res.data) return
			console.log('有数据');
		},
		dateTimeFun(e){
			let con = e.detail.value
			this.dateTimeVal = con
			let y = this.dateTime.yArr[con[0]]
			let m = this.dateTime.mArr[con[1]]
			this.dateTime = this.$util.getDateTime(y,m)
		},
		tapDateTime(){
			let con = this.dateTimeVal
			this.formdata.ServerDate = `${this.dateTime.yArr[con[0]]}-${this.dateTime.mArr[con[1]]}-${this.dateTime.dArr[con[2]]}`
			this.$refs.classTime.close()
		},
		dateFun(e){
			let con = e.detail.value
			this.dateVal = con
		},
		tapDate(){
			let con = this.dateVal
			this.formdata.ServerTime = `${this.date.hours[con[0]]}:${this.date.min[con[1]]}`
			this.formdata.ServerEndTime = `${this.date.hours[con[3]]}:${this.date.min[con[4]]}`
			this.$refs.timeSlot.close()
		},
		cycleFun(e){
			let con = e.detail.value
		},
		// 文件上传
		async uploading(url, tempKey) {
			const r = await this.$upload(url, pro => {
				this.imgArr.forEach(item => {
					if (item.tempKey == tempKey) {
						item.pro = pro;
					}
				})
			})
			this.imgArr.forEach(item => {
				if (item.tempKey == tempKey) {
					item.netPath = r;
				}
			});
		
		
			console.log('upload file ' + r);
			this.formdata.Images.push(r)
		},
		upload(){
			let _this = this;
			uni.chooseMedia({
				count: 9,
				mediaType: ['image'],
				sourceType: ['album', 'camera'],
				maxDuration: 30,
				camera: 'back',
				success(res) {
					res.tempFiles.forEach(async item => {
						let o = {
							duration: 0,
							fileType: item.fileType,
							tempUrl: item.tempFilePath,
							flieUrl: item.tempFilePath,
							tempKey: uni.$u.guid(8),
							pro: 0
						}
			
						
						_this.imgArr.push(o);
						// _this.formdata.Images.push(o)
						
					  let rex =	await _this.uploading(o.flieUrl, o.tempKey);
					});
				}
			})
		},
		delImg(i){
			this.imgArr.splice(i,1)
			this.formdata.Images.splice(i,1)
		},
		selectImg_APP() {
			let _this = this;
			uni.showActionSheet({
				itemList: ['选择照片', '取消'],
				success: function(res) {
					if (res.tapIndex == 0) {
						let ind = 1
						uni.chooseImage({
							// count:  允许上传的照片数量
							count: 9,
							// sizeType:  original 原图，compressed 压缩图，默认二者都有
							sizeType: ["original", "compressed"],
							sourceType: ["album"],
							success(res) {
								console.log(res)
								res.tempFiles.forEach(async item => {
									let o = {
										duration: 0,
										fileType: 'image',
										tempUrl: item.path,
										flieUrl: item.path,
										tempKey: uni.$u.guid(8),
										pro: 0
									}
								
									_this.imgArr.push(o);
									
									let rex =	await _this.uploading(o.flieUrl, o.tempKey);
								});
							}
						});
						return;
						
		
					}
				},
				fail: function(res) {
		
				}
			})
		},
		async send(){
			let con = this.formdata
			if(!con.Title){
				this.$pv.msg('请填写课程标题');
				return
			}
			if(!con.Remark){
				this.$pv.msg('请填写课程介绍');
				return
			}
			if(!con.TechnicianName){
				this.$pv.msg('请填写教练姓名');
				return
			}
			// if(!con.TechnicianDesc){
			// 	this.$pv.msg('请填写教练介绍');
			// 	return
			// }
			if(!con.Images.length){
				this.$pv.msg('至少上传一张图片');
				return
			}
			if(!con.ServerDate){
				this.$pv.msg('请选择上课日期');
				return
			}
			if(!con.ServerTime){
				this.$pv.msg('请选择上课时间');
				return
			}
			if(!con.Place){
				this.$pv.msg('请填写上课地址');
				return
			}
			if(!con.Mobile){
				this.$pv.msg('请填写联系电话');
				return
			}
			if(!con.IsPayRegisterFee){
				this.$pv.msg('请选择收费方式');
				return
			}
			if(con.IsPayRegisterFee==1 && !con.RegisterFee){
				this.$pv.msg('请输入课程价格');
				return
			}
			this.formdata.Images = JSON.stringify(this.formdata.Images)
			let res = await this.$api.post('/Appointment/Apply',this.formdata)
			if(res.message=='success'){
				this.$pv.msg('发布成功');
				setTimeout(()=>{
					uni.$emit('send')
					uni.navigateBack()
				},700)
			}
		},
		checkAddress(){
			uni.chooseLocation({
				success: (res) => {
					console.log(res);
					this.address = res.address
				},
				fail: (err) => {
					console.log('出错了', err);
				}
			})
		},
	}
};
</script>

<style lang="scss">
page{
	background-color: #f6f6f6;
}
.gary {
	color: #999999 !important;
	font-size: 32rpx;
	font-weight: 500;
}
image{
	width: 100%;
	height: 100%;
}
.fillet {
	border-radius: 16rpx;
	background-color: #fff;
	box-sizing: border-box;
}
.warp {
	padding: 26rpx;
	.img_list{
		margin-top: 30rpx;
		box-sizing: border-box;
		padding: 26rpx 32rpx;
		.title{
			font-size: 30rpx;
		}
		image{
			width: 100%;
			height: 100%;
		}
		.img_box{
			display: flex;
			align-items: center;
			// justify-content: space-evenly;
			flex-wrap: wrap;
		}
		.videobox{
			padding: 32rpx;
			position: relative;
			>view{
				width: 100%;
				height: 300rpx;
				border-radius: 16rpx;
				overflow: hidden;
				video{
					width: 100%;
					height: 100%;
				}
			}
			.icon{
				position: absolute;
				right: 10rpx;
				top: 10rpx;
				width: 50rpx;
				height: 50rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				// border-radius: 50%;
				z-index: 999;
				image{
					width:40rpx;
					height: 40rpx;
					background: #fff;
					border-radius: 50%;
				}
			}
		}
		.img{
			width: 200rpx;
			height: 200rpx;
			border-radius: 8rpx;
			margin-right: 16rpx;
			margin-top: 16rpx;
			// overflow: hidden;
			position: relative;
			image{
				border-radius: 8rpx;
			}
			.icon{
				position: absolute;
				right: -20rpx;
				top: -14rpx;
				width: 50rpx;
				height: 50rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				// border-radius: 50%;
				z-index: 999;
				image{
					width:40rpx;
					height: 40rpx;
					background: #fff;
					border-radius: 50%;
				}
			}
		}
		.img:nth-child(3n){
			margin-right: 0;
		}
		.addimg{
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: #f6f6f6;
			image{
				width: 80rpx;
				height: 80rpx;
			}
		}
	}
	.textbox {
		padding: 26rpx 32rpx;
		.tit_box{
			margin-bottom: 20rpx;
		}
		input {
			font-weight: bold;
			padding-bottom: 20rpx;
			border-bottom: 1rpx solid #E4E4E4;
		}
		.placeholderStyle{
			font-size: 32rpx;
			font-weight: 500;
			color: #C2C2C2;
		}
		input:nth-child(2){
			margin-top: 20rpx;
		}
		textarea {
			width: 100%;
			height: 150rpx;
			margin-top: 20rpx;
			font-size: 26rpx;
			line-height: 1.6;
		}
	}
	.checkbox {
		margin-top: 30rpx;
		padding: 0 32rpx;
		.check_item {
			// border-bottom: 2rpx solid #404040;
			display: flex;
			align-items: center;
			justify-content: space-between;
			view {
				color: #333333;
				font-size: 28rpx;
			}
			.check_content {
				display: flex;
				align-items: center;
				justify-content: flex-end;
				padding: 26rpx 0;
				width: 70%;
				input {
					font-size: 26rpx !important;
					width: 100%;
					text-align: right;
				}
				.input-placeholder {
					font-size: 26rpx !important;
				}
				.lit{
					width: 100%;
					text-align: right;
					overflow: hidden; 
					white-space: nowrap; 
					text-overflow: ellipsis; 
				}
				.inp_box {
					display: flex;
					align-items: center;
					flex-wrap: wrap;
					justify-content: flex-end;
					/deep/ .u-radio-group{
						.u-radio{
							margin-left: 20rpx;
						}
						text{
							font-size: 28rpx !important;
						}
					}
					>view {
						display: flex;
					}
				
					.total_reward {
						font-size: 28rpx;
						color: rgb(156, 156, 156);
						margin-top: 16rpx;
					}
				}
			}
		}
		.check_item:last-child {
			border: 0;
		}
	}
	.check_wap{
		border-top-left-radius: 24rpx;
		border-top-right-radius: 24rpx;
		background-color: #fff;
		padding: 26rpx;
		padding-bottom: 40rpx;
		view{font-size: 28rpx;}
		.check_tab{
			margin-top: -10rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-bottom: 2rpx;
			border-bottom: 2rpx solid #E4E4E4;
			.nav{
				display: flex;
				align-items: center;
				flex: 0.9;
				.nav_text{
					padding: 10rpx 24rpx;
				}
				.nav_text:first-child{
					padding-left: 0;
				}
			}
			.nav_active{
				color: #E0C48E;
				position: relative;
				&::after{
					content: '';
					position: absolute;
					bottom: -6rpx;
					left: 50%;
					transform: translate(-50%,-50%);
					width: 30%;
					height: 6rpx;
					border-radius: 24rpx;
					background-color: #E0C48E;
				}
			}
			.tit{
				font-size: 32rpx;
				color: #fff;
				justify-content: center;
			}
			.close{
				padding: 10rpx;
				display: flex;
				align-items: center;
				image{
					width: 44rpx;
					height: 44rpx;
				}
			}
		}
		.picker_view{
			width: 100%;
			margin: 20rpx 0;
			height: 500rpx;
			overflow: hidden;
			.picker_colum{
				display: flex;
				align-items: center;
				justify-content: center;
			}
			.border{
				border-top: 2rpx solid #E4E4E4;
				border-bottom: 2rpx solid #E4E4E4;
			}
		}
		.maskclass{
			background:none;
		}
		.picker_btn{
			border-radius: 50rpx;
			font-size: 30rpx;
			color: #fff;
			padding: 20rpx 0;
			margin-bottom: 20rpx;
			text-align: center;
			background: #202020;
		}
	}
	.btn_box {
		// background-color: #262626;
		position: fixed;
		width: 100%;
		box-sizing: border-box;
		bottom: 0;
		left: 0;
		padding: 20rpx 26rpx;
		padding-bottom: 40rpx;
		background-color: #fff;
		z-index: 9;
		.go_btn {
			border-radius: 50rpx;
			font-size: 30rpx;
			color: #fff;
			padding: 20rpx 0;
			text-align: center;
			background-color: #0D0D0D;
		}
	}
}
</style>
